<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            margin-left: 50px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        /* 
            练习 拖拽

            需求：
                1. 一定是由三个事件组成
                    1-1:鼠标按下：，按下以后，盒子可以跟着走
                    1-2:鼠标移动：随着光标移动，盒子实时跟着光标走
                    1-3:鼠标抬起：抬起以后，盒子就不跟着走
                    +核心问题：如何能让盒子跟着走，就是需要mousemove的事件处理函数能执行
                        =》准备一个开关，在mousemove事件处理函数内
                        =》直接判断开关如果是falsae，直接return ，否则再执行
                    + 问题1:什么时候需要mousemove内的代码正常执行？
                        按下以后，可以在鼠标按下事件内把开关赋值为true
                    + 问题2:什么时候 mousemove 不能正常执行？
                        抬起以后，在鼠标抬起事件中，将开关赋值为false
                2. 在移动事件内，让div跟着走就可以了
                    + 问题3:真的要把事件绑定给div吗？
                        假设吧事件绑定在div身上，当给div赋值时
                        你光标的坐标点赋值给div，表示div的左上角和光标是重叠的
                        当你向右下角走时，没有问题，但是只要你往坐上稍微移动一点点，就会离开div
                    解决（暂时）：把光标放到div中间
                    解决（永久）：把事件向上绑定，给到document

                    +问题4:拿到哪一组坐标？
                        =》整屏移动 最好使用client 一组
        */

        // 获取元素
        let div = document.querySelector("div");

        // 提前准备一个变量当作开关
        let flag = false;
        let boxX = 0;
        let boxY = 0;

        let a = div.offsetLeft;
        let b = div.offsetTop

        document.onmousedown = function (e) {
            flag = true;
            boxX = e.offsetX
            boxY = e.offsetY
        }
        div.onmouseup = function () {
            flag = false;
        }
        document.onmousemove = function (e) {
            if (flag) {
                let x = e.clientX - boxX - a;
                let y = e.clientY - boxY - b;

                div.style.left = x + "px";
                div.style.top = y + "px";
            }
        }


    </script>
</body>

</html>